<template>

    <a-dropdown :ref="componentRef">
      <a-menu slot="overlay"  @click="handleMenuClick">
        <a-menu-item v-for="(menu,idx) in dropDownMenu" :key="idx"> <a-icon :type="menu.menuIcon || 'unordered-list'" />{{menu.menuTitle}} </a-menu-item>
      
      </a-menu>
      <a-button :type="type" :shape="shape" :size="size" style="margin-left: 8px"> {{title}} <a-icon :type="icon" /> </a-button>
    </a-dropdown>
</template>
<script>


export default {
    name:'ExtDropDownButton',
    components:{},
    props:{
        componentRef:[String,Number],
        disabled:{
            type:Boolean,
            default:false,
        },
        icon:String,
        size:{
            type:String,
            default:'small'
        },
        type:{
            type:String,
            default:'primary'
        },
        dropDownMenu:{
            type:Array,
            default:[]
        },
        title:String,
        shape:String,
        click:String,
      
    },
    data(){
        return{
          
        }
    },
   
    created(){
        
    },
    methods:{
        handleMenuClick(e){
            this.$emit('click',e) 
        }
    }
}
</script>